<template>
	<view class="container">
		<view class="title">最近聊天</view>
		<view @click="goToChat(item)" v-for="item in messages" :key="item.id" class="list">
			<image mode="aspectFill" :src="item.imgurl" class="avatar"></image>
			<view class="message-content">
				<view class="sender">{{item.username}}</view>
				<view class="content">{{item.message}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config';
	export default {
		data() {
			return {
				messages: [],
				// messages: [{
				// 	sender: '张三',
				// 	content: '你好，今天晚上一起吃饭吗？',
				// 	sendTime: '2024-03-18 10:00',
				// 	imgurl: '/static/logo2.png',
				// }]
			};
		},
		methods: {
			onLoad() {
				uni.request({
					url: config.baseUrl + 'chat/getList',
					method: 'POST',
					data: {
						senderId: this.$global.personInfo.openid
					},
					success: (res) => {
						// console.log(res);
						this.messages = res.data.data;
						for (let i = 0; i < this.messages.length; i++) {
							this.messages[i].imgurl = config.baseUrl + this.messages[i].imgurl
						}
						console.log(this.messages);
					}
				})
			},
			goToChat(item) {
				// 跳转到消息详情页，可以在这里处理跳转逻辑
				console.log(item.to_id);
				uni.navigateTo({
					url: '/pages/Chat/Chat?to_id=' + item.to_id + '&img=' + item.imgurl
				})
			},
			formatTime(timeStr) {
				// 格式化时间，根据时间间隔显示具体时间或者今天、昨天等
				// 这里只是示例，实际情况根据需求进行调整
				return timeStr.split(' ')[1]; // 只显示具体时间
			}
		}
	};
</script>

<style>
	.container {
		height: 88vh;
		background: linear-gradient(to bottom, #FFDAB9, #FFF8DC);
		/* 从上往下变淡的橘色渐变 */
		background: linear-gradient(to right, #FFDAB9, #FFF8DC);
		/* 从左往右变淡的橘色渐变 */
	}

	.title {
		display: flex;
		align-content: center;
		justify-content: center;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.sender {
		font-weight: bold;
	}

	.list {
		display: flex;
		margin-bottom: 15rpx;
		flex-direction: row;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.message-content {
		margin-left: 10px;
		/* 调整发送者名字和内容之间的间距 */
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
	}
</style>